// 布局工具类
.flex {
  display: flex;
  
  &-center {
    align-items: center;
    justify-content: center;
  }
  
  &-between {
    justify-content: space-between;
  }
  
  &-around {
    justify-content: space-around;
  }
  
  &-start {
    justify-content: flex-start;
  }
  
  &-end {
    justify-content: flex-end;
  }
  
  &-wrap {
    flex-wrap: wrap;
  }
  
  &-column {
    flex-direction: column;
  }
  
  &-1 {
    flex: 1;
  }
}

.items {
  &-center {
    align-items: center;
  }
  
  &-start {
    align-items: flex-start;
  }
  
  &-end {
    align-items: flex-end;
  }
}

// 间距工具类
@each $size, $value in (
  'mini': var(--spacing-mini),
  'small': var(--spacing-small),
  'medium': var(--spacing-medium),
  'large': var(--spacing-large),
  'xl': var(--spacing-xl),
  'xxl': var(--spacing-xxl),
  'xxxl': var(--spacing-xxxl)
) {
  .m-#{$size} { margin: #{$value}; }
  .mt-#{$size} { margin-top: #{$value}; }
  .mr-#{$size} { margin-right: #{$value}; }
  .mb-#{$size} { margin-bottom: #{$value}; }
  .ml-#{$size} { margin-left: #{$value}; }
  .mx-#{$size} { margin-left: #{$value}; margin-right: #{$value}; }
  .my-#{$size} { margin-top: #{$value}; margin-bottom: #{$value}; }
  
  .p-#{$size} { padding: #{$value}; }
  .pt-#{$size} { padding-top: #{$value}; }
  .pr-#{$size} { padding-right: #{$value}; }
  .pb-#{$size} { padding-bottom: #{$value}; }
  .pl-#{$size} { padding-left: #{$value}; }
  .px-#{$size} { padding-left: #{$value}; padding-right: #{$value}; }
  .py-#{$size} { padding-top: #{$value}; padding-bottom: #{$value}; }
}

// 文本工具类
.text {
  &-center { text-align: center; }
  &-left { text-align: left; }
  &-right { text-align: right; }
  
  &-primary { color: var(--text-color-primary); }
  &-regular { color: var(--text-color-regular); }
  &-secondary { color: var(--text-color-secondary); }
  &-disabled { color: var(--text-color-disabled); }
  
  &-success { color: var(--success-color); }
  &-warning { color: var(--warning-color); }
  &-danger { color: var(--danger-color); }
  &-info { color: var(--info-color); }
  
  &-mini { font-size: var(--font-size-mini); }
  &-small { font-size: var(--font-size-small); }
  &-medium { font-size: var(--font-size-medium); }
  &-large { font-size: var(--font-size-large); }
  &-xl { font-size: var(--font-size-xl); }
  &-xxl { font-size: var(--font-size-xxl); }
  &-title { font-size: var(--font-size-title); }
  
  &-bold { font-weight: 600; }
  &-normal { font-weight: 400; }
}

// 圆角工具类
.rounded {
  &-small { border-radius: var(--border-radius-small); }
  &-medium { border-radius: var(--border-radius-medium); }
  &-large { border-radius: var(--border-radius-large); }
  &-xl { border-radius: var(--border-radius-xl); }
  &-full { border-radius: 50%; }
}

// 阴影工具类
.shadow {
  &-light { box-shadow: var(--shadow-light); }
  &-medium { box-shadow: var(--shadow-medium); }
  &-large { box-shadow: var(--shadow-large); }
  &-none { box-shadow: none; }
}

// 位置工具类
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

// 宽高工具类
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

// 溢出工具类
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-visible { overflow: visible; }

// 过渡动画
.transition {
  transition: all var(--transition-duration-2) var(--transition-function);
  
  &-fast {
    transition: all var(--transition-duration-1) var(--transition-function);
  }
  
  &-slow {
    transition: all var(--transition-duration-3) var(--transition-function);
  }
}

// 鼠标悬停效果
.hover-lift {
  transition: transform var(--transition-duration-2) var(--transition-function);
  
  &:hover {
    transform: translateY(-2px);
  }
}

.hover-scale {
  transition: transform var(--transition-duration-2) var(--transition-function);
  
  &:hover {
    transform: scale(1.02);
  }
}